<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>登录日志</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="form">
        <el-form :inline="true">
          <el-form-item label="用户名:">
              <el-input v-model="ruleForm1.username" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="用户类型:">
              <el-input v-model="ruleForm1.type" placeholder="请输入用户类型"></el-input>
          </el-form-item>
          <el-form-item label="登录地点:">
              <el-input v-model="ruleForm1.provation" placeholder="请输入登录地点"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">搜索</el-button>
          </el-form-item>
        </el-form>
    </div>

    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="序号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="用户名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="登录ip">
      </el-table-column>
      <el-table-column
        prop="address"
        label="登录时间">
      </el-table-column>
      <el-table-column
        prop="address"
        label="登录地点">
      </el-table-column>
      <el-table-column
        prop="address"
        label="登录浏览器">
      </el-table-column>
      <el-table-column
        prop="address"
        label="登录操作系统">
      </el-table-column>
      <el-table-column
        prop="address"
        label="用户类型">
      </el-table-column>
    </el-table>

<!--    <el-pagination-->
<!--      @size-change="handleSizeChange"-->
<!--      @current-change="handleCurrentChange"-->
<!--      :current-page="currentPage"-->
<!--      :page-sizes="[100, 200, 300, 400]"-->
<!--      :page-size="100"-->
<!--      layout="total, sizes, prev, pager, next, jumper"-->
<!--      :total="400">-->
<!--    </el-pagination>-->
<!--    -->


  </div>
</template>


<script>
export default {

  data(){
    return {
      tableData:{},
      ruleForm1:{},
      pagination: {//分页相关模型数据
        currentPage: 1,//当前页码
        pageSize: 10,//每页显示的记录数
        total: 0//总记录数
      },
      show:true
    }
  },

}
</script>

<style scoped>
.form{
 margin-top: 20px;
}
</style>
